<template>
	<view class="wrap setFontColor1">
		<!-- <view class="status-bar"></view> -->
		<!-- <u-transition :show="true" mode="slide-down" duration="1000"> -->
		<view class="content">
			<view class="user">
				<view class="base-info ">
					<view class="user-info setVerticalCenter">
						<navigator class="setNowrap1" url="/pagesUser/profile">
							<u-avatar v-if="user.headImg" size="100" :src="user.headImg" mode="square"></u-avatar>
							<u-avatar v-else text="标" size="100" fontSize="50" bg-color="#73d1f1"></u-avatar>
						</navigator>
						<view class="setNowrap2  sethorizontalbetween">
							<navigator v-if="user.id > 0" class="info setOnlyDisplay" hover-class="none"
								url="/pagesUser/profile">
								<view class="nickname ">{{ user.showName?user.showName:'' }}</view>
								<view class="mobile" v-if="user.phone">{{ user.phone }}</view>
							</navigator>
							<view v-else class="info">
								<view class="btn-login" @tap="login()">{{ loginText }}</view>
							</view>
							<view class="setting" v-if="user.id > 0">
								<navigator class="btn-setting setVerticalLayout" url="/pagesUser/profile">
									<!-- <iconfont type="modify-pen"></iconfont> -->
									<text class="iconfont iconedit " style="font-size: 50rpx;"></text>
								</navigator>
							</view>
						</view>
					</view>

				</view>
				<!-- 2023年2月7日 加入苹果ios判断,苹果用户不充值 -->
				<view v-if="platform=='ios'" style="text-align: center;font-size: 30rpx;margin-top: 16rpx;">
					<text>才能招标，免费查看招标和企业信息！</text>
				</view>
				<view v-else>
					<navigator
						:url="'/pagesUser/rember/oldMember?showName='+user.showName+'&vipEndTime='+user.vipEndTime+'&phone='+user.phone"
						v-if="user.vipFlag==1"
						class="setcolor2 vipCard setRadius setVerticalCenter sethorizontalbetween ">
						<view
							class="text setPadding setNowrap2 setVerticalCenter sethorizontalbetween setVerticalCenter"
							style="background-image: -webkit-linear-gradient(left,  green 25%, green 90%);">

							<view class="  text2 setfontSize2  setNowrap1 setVerticalCenter"
								style="text-align: right;font-size: 30rpx;">
								<text class="iconfont icon-vip-  setRightMargin" style="font-size: 60rpx;"></text>
								有效期至：{{$u.timeFormat(user.vipEndTime, 'yyyy年mm月dd日')}}
							</view>
							<view class="setNowrap1 setVerticalCenter">
								充值
								<text class="iconfont iconarrow-right " style="font-size: 40rpx;"></text>
							</view>
						</view>
					</navigator>


					<navigator url="/pagesUser/rember/rember" v-else
						class="setcolor2 vipCard setRadius setVerticalCenter sethorizontalbetween ">

						<view
							class="text setPadding setNowrap2 setVerticalCenter sethorizontalbetween setVerticalCenter">

							<view v-if="user.vipFlag==0" class="text  text2 setfontSize2  setNowrap1 setVerticalCenter"
								style="text-align: right;font-size: 26rpx;">
								<text class="iconfont icon-vip- setRightMargin" style="font-size: 60rpx;"></text>
								您的会员在：{{$u.timeFrom(user.vipEndTime, 'yyyy年mm月dd日')}}已过期
							</view>

							<view v-else class="text  text2 setfontSize2  setNowrap1 setVerticalCenter"
								style="text-align: right;">
								<text class="iconfont icon-vip- setRightMargin" style="font-size: 60rpx;"></text>
								开通会员享尊贵特权
							</view>

							<view class="setNowrap1 setVerticalCenter">
								立即开通
								<text class="iconfont iconarrow-right " style="font-size: 40rpx;"></text>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="boxPadding">
				<view class="setwarp setPadding setRadius setBgfff setVerticalCenter ">
					<view class=" setWidth33">
						<navigator class="item setVertical setVerticalCenter" url="/pagesUser/favorites">
							<text class="iconfont iconfabulous " style="font-size: 50rpx;color: #ffa5f3;"></text>
							<text>我的收藏</text>
						</navigator>
					</view>
					<view class="setWidth33">
						<navigator class="item setVertical setVerticalCenter" url="/pagesUser/profile">

							<text class="iconfont iconedit " style="font-size: 50rpx;color: #1dc3ff;"></text>
							<text>我的资料</text>
						</navigator>
					</view>
					<view class="setVertical setVerticalCenter setWidth33 sethorizontalbetween">
						<view class="setNowrap2" style="padding: 12rpx;">
							<switch :checked="pushState" @change="switch1Change" color="#8cc700"
								style="transform:scale(0.7)" />
						</view>
						<view class="setDisplayCenter">
							<text class="setNowrap1 ">订阅开关</text>
						</view>
					</view>
					<view class=" setWidth33">
						<navigator class="item setVertical setVerticalCenter" url="/pagesUser/feedback">
							<text class="iconfont iconjubao2" style="font-size: 50rpx;color: #307abb;"></text>
							<text>举报反馈</text>
						</navigator>
					</view>

					<navigator class=" setVertical setVerticalCenter setWidth33" url="/pagesUser/payRecord">
						<view class="item setVertical setVerticalCenter">
							<text class="iconfont iconjilu " style="font-size: 50rpx;color: #ffac74;"></text>
							<text>消费记录</text>
						</view>
					</navigator>
					<navigator v-if="platform!='ios'" class=" setVertical setVerticalCenter setWidth33"
						url="/pagesUser/rember/rember">
						<view class="item setVertical setVerticalCenter">
							<text class="iconfont iconviptehuishiduan " style="font-size: 50rpx;color: #ff7878;"></text>
							<text>会员充值</text>
						</view>
					</navigator>
					<!-- <navigator class=" setVertical setVerticalCenter setWidth33" url="/pagesUser/myNews">
						<view class="settextRight bage" style="width: 100%;">
							<view v-if="msgNum>0" class="box">
								<u-badge :absolute="false" type="error" max="9" size="40" :value="msgNum"
									:offset="[-10, 0]"></u-badge>

							</view>
						</view>
						<view class="item setVertical setVerticalCenter">

							<text class="iconfont iconnews " style="font-size: 50rpx;color: #ff7878;"></text>
							<text>我的消息</text>
						</view>
					</navigator> -->
				</view>
			</view>

			<view class="boxPadding">

				<view class="setwarp setPadding setRadius setBgfff setVerticalCenter ">
					<view class=" setWidth33">
						<navigator class="item setVertical setVerticalCenter" url="/pagesCommon/about">

							<text class="iconfont iconzizhi " style="font-size: 50rpx;"></text>
							<text>关于我们</text>

						</navigator>
					</view>

					<navigator class="setVertical setVerticalCenter setWidth33" url="/pagesUser/contactUs">
						<view class="item setVertical setVerticalCenter">
							<text class="iconfont icontelephone " style="font-size: 50rpx;"></text>
							<text>联系我们</text>
						</view>
					</navigator>

					<navigator class=" setVertical setVerticalCenter setWidth33" url="/pagesUser/setting">
						<view class="item setVertical setVerticalCenter">
							<text class="iconfont iconsetting " style="font-size: 50rpx;"></text>
							<text>设置</text>
						</view>
					</navigator>

					<!-- <view class="setVertical setVerticalCenter setWidth33">
							<navigator class="item setVertical setVerticalCenter" url="/pagesUser/rember/rember">
								<text class="iconfont icontelephone " style="font-size: 50rpx;color: #44ff1a;"></text>
								<text>会员充值</text>
							</navigator>
						</view>
						<view class="setVertical setVerticalCenter setWidth33">
							<navigator class="item setVertical setVerticalCenter"
								:url="'/pagesUser/rember/oldMember?showName='+user.showName">
								<text class="iconfont icontelephone " style="font-size: 50rpx;color: #44ff1a;"></text>
								<text>老会员</text>
							</navigator>
						</view> -->
				</view>
			</view>
			<view style="font-size: 32rpx;text-align: center;">
				才能网旗下产品
			</view>
			<view class="boxPadding">

				<view class="setwarp setPadding setRadius setBgfff setVerticalCenter ">
					<view class=" setWidth33" @click="openApp('caineng')">
						<view class="item setVertical setVerticalCenter">

							<image src="../../static/images/logo/cainengApp.png" class="icon" mode="aspectFit"></image>
							<text>才能网-用工</text>

						</view>
					</view>

					<view class="setWidth33" @click="openApp('caop')">
						<view class="item setVertical setVerticalCenter">
							<image src="../../static/images/logo/caopApp.png" class="icon" mode="aspectFit"></image>
							<text>曹铺-建材店铺</text>
						</view>
					</view>

					<view class="setWidth33" @click="openApp('zhaobiao')">
						<view class="item setVertical setVerticalCenter">
							<image src="../../static/images/logo/logo.png" class="icon" mode="aspectFit"></image>
							<text>才能招标</text>
						</view>
					</view>

				</view>
			</view>


			<view class="tab-bar"></view>

		</view>
		<!-- </u-transition> -->
		<pageLoading v-if="showPageLoading"></pageLoading>
	</view>
</template>

<script>
	import iconfont from '@/components/iconfont/iconfont.vue';
	import pageLoading from '@/components/loading/pageLoading.vue';
	import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
	const uniShare = new UniShare();
	export default {
		components: {
			iconfont,
			pageLoading
		},
		data() {
			return {
				msgNum: 0,
				user: {},
				loginText: '登录',
				showPageLoading: true,
				pushState: true, //订阅开关

				//目前使用的平台
				platform: ""

			};
		},
		onBackPress({
			from
		}) {
			//console.log(from);
			if (from == 'backbutton') {
				this.$nextTick(function() {
					uniShare.hide()
				})
				return uniShare.isShow;
			}
		},
		onShow() {

			if (uni.getStorageSync('isLogin') != 1) {
				this.$app.login();
			} else {
				this.getUserInfo(); //获取用户信息
			}


			//登录
			let source = uni.getStorageSync('source');
			if (source == 'login' || source == 'storyEdit') {
				uni.removeStorageSync('source');
			}

		},
		onLoad(e) {
			this.platform = this.$app.getPlatform();
			console.info('当前平台是:' + this.platform)
			this.pushState = uni.getStorageSync("pushState") == null ? true : uni.getStorageSync("pushState");
		},
		onPullDownRefresh() {

			this.getUserInfo(); //获取用户信息

			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},

		methods: {

			/*打开才能网和曹铺小程序*/
			openApp(name) {

				// #ifdef APP-PLUS
				let appId = ''
				if (name == 'caineng') { //才能网app小程序原始ID
					appId = 'gh_6c985e56366c'
				} else if (name == 'caop') { //曹铺小程序原始ID
					appId = 'gh_a10482902067'
				} else if (name == "zhaobiao") { //才能招标小程序原始ID
					appId = 'gh_cb35539e23e4'
				}
				//APP打开小程序
				plus.share.getServices(
					res => {
						let sweixin = null;
						for (let i in res) {
							if (res[i].id == 'weixin') {
								sweixin = res[i];
							}
						}
						//唤醒微信小程序
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: appId, //
								type: 0, //小程序版本  0-正式版； 1-测试版； 2-体验版。
								// path: 'pages/index/index?id=' + 1 //小程序的页面,用传的参数在小程序接值判断跳转指定页面
							});
						}
					}
				);
				// #endif

				// #ifdef MP-WEIXIN
				let appId = ''
				if (name == 'caineng') { //才能网app小程序原始ID
					appId = 'wx94ebb758f930c66e'
				} else if (name == 'caop') { //曹铺小程序AppID
					appId = 'wxf28d17559114398b'
				} else if (name == "zhaobiao") { //才能招标小程序原始ID
					appId = 'wx4268e877fa33eb84'
				}

				uni.navigateToMiniProgram({
					appId: appId,
					//path: url,
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				});
				// #endif
			},


			/*获取用户信息*/
			getUserInfo() {
				let url = this.$baseApp.api.user.getUserInfo;
				this.$http.get(url).then(res => {
					if (res.code == 200) {
						this.showPageLoading = false;
						this.user = res.data;
						// 更新用户信息
						if (res.data) {
							uni.setStorageSync("userInfo", res.data);
							// console.log("res.data.vipEndTime", res.data.vipEndTime)
							if (res.data.vipEndTime) {
								let timestamp = new Date().getTime();
								// console.log("res.data.vipEndTime", res.data.vipEndTime)
								if (timestamp <= res.data.vipEndTime) {
									this.user.vipFlag = 1
									// 将正常的会员时长值保存至缓存
									uni.setStorageSync("vipEndTime", res.data.vipEndTime);
									// 用户为正常会员
								} else if (res.data.vipEndTime) {
									//当前会员时间 已过期
									this.user.vipFlag = 0
									uni.removeStorageSync('vipEndTime');
								} else {
									uni.removeStorageSync('vipEndTime');
								}
							}



							// console.log("this.user.vipFlag", this.user.vipFlag)

						}

						//console.log('reooooooooooooooooos', res)

					} else {
						//跳转到登录页面
						// this.login();
						this.$alert(res.msg);
					}

					//console.log("这里是获取用户基本信息", res)
				}, err => {
					// this.login();

				})
			},

			/*登录*/
			// login() {
			// 	this.$app.login();
			// },

			//推送开关
			switch1Change(e) {
				console.info(e.detail.value);
				uni.setStorageSync("pushState", e.detail.value);
				if (e.detail.value == false) {
					this.$alert("将不再向您推荐招投标信息！");
				}

			}

		}
	};
</script>

<style scoped lang="scss">
	.top {

		/*页面标题*/
		.page-title {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90rpx;
			text-align: center;
			z-index: 9999;
			font-size: 38rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.shareBtn {
		background: transparent;
		color: #909399;

	}

	.boxPadding {
		box-sizing: border-box;
		padding: 10rpx;

		.bage {
			position: relative;

			.box {
				width: auto;
				height: 30rpx;
				position: absolute;
				top: 15%;
				right: 26%;

			}
		}

	}

	button::after {
		border: none;
	}

	.user {
		margin-bottom: 10rpx;

		.vipCard {
			width: 100%;
			height: 102rpx;

			background-color: #fff;

			margin: 10rpx auto;

			.text {
				overflow: hidden; //超出部分隐藏
				// font-size: 1.2rem;   //大小
				font-size: 30rpx;
				text-align: left;
				line-height: 3rem; //垂直居中
				background-image: -webkit-linear-gradient(left, red 25%, yellow 60%); //括号内可添加多种颜色，多种百分比   线性渐变
				-webkit-text-fill-color: transparent; //颜色填充 透明
				-webkit-background-clip: text; //背景颜色绘制区域
				animation: stream 15s infinite linear; //流动 15秒 循环 直线
				background-size: 200% 100%;

				.text1 {
					margin: 0 20rpx;
					font-size: 80rpx;
					line-height: 80rpx;
				}

				.text2 {
					margin: 0 20rpx;
					text-align: center;
				}
			}


		}

		.base-info {
			/* background-image: linear-gradient(to bottom, #fff, #00aa8f 30%); */
			// background: $color;
			background-color: #21b599;
			// border-top: 1rpx solid #fff;
			display: flex;
			align-items: center;
			color: #fff;
			height: 220rpx;
		}

		.user-info {
			width: 100%;
			padding: 54rpx 32rpx;
			display: flex;
			align-item: center;
			justify-content: space-between;

			.avatar {
				flex-grow: 0;
				flex-shrink: 0;
				line-height: 0;
				border-radius: 50%;

				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
				}
			}

			.default-avatar {
				margin-top: -12rpx;
			}

			.info {
				flex-grow: 1;
				flex-shrink: 1;
				padding-left: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.nickname {
					font-size: 34rpx;
					font-weight: 500;

					margin-top: -14rpx;
				}

				.mobile {
					// font-size: 34rpx;
					// color: #fff;
					display: flex;
					align-items: center;
					line-height: normal;

					/deep/ .icon {
						margin-left: 30rpx;
						font-size: 28rpx;
						display: block;
					}
				}

				.user-type {
					display: flex;
					margin-top: 6rpx;

					text {
						font-size: 24rpx;
						// color: #fff;
						background-color: #cd8202;
						padding: 0 24rpx;
						border-radius: 55px;
					}
				}

				.btn-login {
					font-size: 42rpx;
					background: transparent;
					color: #fff;
					text-align: left;
					width: 200rpx;
				}
			}

			.setting {
				flex-grow: 0;
				flex-shrink: 0;

				.btn-setting {
					margin-top: 10rpx;

					/deep/ .icon {
						// color: #fff;
						font-size: 48rpx;
					}
				}
			}
		}

		.user-info2 {
			padding: 4rpx 32rpx;
			display: flex;
			align-item: center;
			justify-content: space-between;


		}
	}

	.nav {
		// margin-top: -15rpx;
		margin-bottom: calc(var(--window-bottom) + 20rpx);

		.list {
			margin: 30rpx 0;

			.item {
				padding-left: 24rpx;
				background: #ffffff;

				.info {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #e9ebee;
					padding: 4rpx 24rpx 4rpx 0;
					height: 100rpx;

					.name {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						font-size: 34rpx;
						line-height: normal;

						image {
							width: 45rpx;
							height: 45rpx;
							margin-right: 16rpx;
						}

						/deep/ .icon {
							color: #8cc700;
							font-size: 44rpx;
							margin-right: 16rpx;
							line-height: normal;
						}

						/deep/ .icon-car {
							font-size: 35rpx;
							margin-right: 14rpx;
						}

						/deep/ .icon-profile-o {
							font-size: 48rpx;
							margin-right: 12rpx;
						}

						/deep/ .icon-user-info {
							font-size: 50rpx;
							margin-left: -5rpx;
							margin-right: 10rpx;
						}

						/deep/ .icon-favorite {
							font-size: 42rpx;
						}

						/deep/ .icon-about {
							font-size: 44rpx;
							margin-left: -4rpx;
							margin-right: 12rpx;
						}

						/deep/ .icon-question {
							margin-right: 16rpx;
						}
					}

					/deep/ .icon {
						color: #c1c4c9;
						font-size: 24rpx;
					}
				}

				&:last-child {
					.info {
						border-bottom: 0;
					}
				}
			}
		}
	}

	.status-bar {
		background: $color;
	}

	.icon {
		width: 100rpx;
		height: 100rpx;
	}
</style>
